<div class="search-header-container">
    <span class="search-header--menu">
        <i class="f-icon f-icon-arrow-chevron-left"></i>
    </span>
    <span class="search-header--title">{{ variableName }}</span>
    <div
        class="search-header--search"
        [ngClass]="{ 'f-state-expand': inSearch }"
        (click)="$event.stopPropagation()"
        [formGroup]="formGroup"
    >
        <span class="search-icon">
            <i class="f-icon f-icon-search"></i>
        </span>
        <input #searchInput type="text" class="form-control" placeholder="查询" [value]="searchText" formControlName="searchControl" />
    </div>
    <div class="search-header--icons" (click)="changeSearchState($event)">
        <span class="search-icon" *ngIf="!inSearch">
            <i class="f-icon f-icon-search"></i>
        </span>
        <span class="search-icon" *ngIf="inSearch">
            <i class="f-icon f-icon-close"></i>
        </span>
    </div>
</div>
